<template>
    <div class="inline-text-field">
        <div class="inline-text-field__input-container" v-bind:class="{'inline-text-field__input-container--active': editMode}">
            <input class="inline-text-field__input" type="text"
                   v-bind:value="value"
                   v-on:input="updateValue($event.target.value)"
                   v-on:focus="editMode = true"
                   v-on:blur="editMode = false"
                   v-on:keyup="inputKeyUp"
                   v-bind:class="{ 'inline-text-field__input--active': editMode }"
                   ref="input">
        </div>
        <div class="inline-text-field__edit-icon" v-html="editIcon" v-if="!editMode"></div>
        <div class="inline-text-field__update-icon" v-html="checkIcon" v-if="editMode"></div>
    </div>
</template>
<script>
    export default {
        props: [
            'value'
        ],

        data: function() {
            return {
                editMode: false,
                editIcon: require('../../assets/img/edit-icon.svg'),
                checkIcon: require('../../assets/img/check-icon.svg')
            }
        },

        methods: {
            updateValue: function(value) {
                this.$emit('input', value)
            },

            inputKeyUp: function(e) {
                if(e.keyCode === 13) {
                    this.$refs.input.blur();
                }
            }
        },

        watch: {
            editMode: function(val) {
                if(val) {
                    this.$refs.input.focus();
                }
            }
        }
    }
</script>